<!--  -->
<template>
  <el-time-picker
    v-model="val"
    align="right"
    size="small"
    :class="{'require':getRequire && isNull()}"
    placeholder="选择时间"
    :format="format"
    :editable="false"
    :disabled="disabled"
    value-format="HH:mm:ss"
    @change="change"
  />
</template>

<script>
import { toDate } from '@/utils/ik/conversion/date'
export default {
  name: 'IkTableTime',
  components: {},
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'change'
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    require: {
      type: Boolean,
      default: false
    },
    code: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tips: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      val: ''
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (value !== null && value !== '' && value !== undefined) {
          this.val = value
        } else {
          if (this.defaultValue.indexOf('Now') !== -1) {
            this.val = toDate(this.defaultValue, this.format)
          } else {
            this.val = this.defaultValue
          }
          this.$emit('change', this.val)
        }
        this.$emit('onFieldChange', this.line, this.code, oldValue, value)
      },
      immediate: true
    }
  },
  methods: {
    change(value) {
      if (value === null || value === '') {
        value = ''
        this.$emit('change', '')
        return
      }
      this.$emit('change', value)
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    reset() {
      this.val = this.defaultValue
    },
    clean() {
      this.val = ''
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep.require> .el-input__inner{
    border: red 1px solid;
}
</style>
